<template>
	<view>
		<view class="aside">
			<!-- 电脑图标 -->
			<image
				src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-baf8b79d-d470-482b-a323-477b967ac823/49d4880f-80e8-47b2-a353-efb6bc25ecc8.png"
				class="modify"></image>
			<image src="../../static/PC/js.png" class="js"></image>
			<image src="../../static/PC/jx2.png" class="jss"></image>
			<image src="../../static/PC/hyxx.png" class="hyxx"></image>
			<view class="hyxx2" @tap="hyxx2">会员信息</view>
			<image src="../../static/PC/jx2.png" class="jsss"></image>
		    <image src="../../static/PC/xxxg.png" class="xxxg"></image>
			<view class="xxxg2" @tap="xxxg2">信息修改</view>
			<image src="../../static/PC/jx2.png" class="jssss"></image>
			<image src="../../static/PC/kq1.png" class="kq1"></image>
			<view class="kq2" @tap="kq2">考勤信息</view>
			<image src="../../static/PC/jx2.png" class="jsssss"></image>
		</view>
		<view class="main">
			<view class="head">
				<image src="../../static/PC/name2.png" class="name2"></image>
				<view class="xx">信息修改</view>
			</view>
			<view class="main2">
				<view class="jx">
					<image
						src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-baf8b79d-d470-482b-a323-477b967ac823/4dcb8914-9578-4dbe-82c5-634a5ebe83ef.png"
						class="tx"></image>
					<view class="xxzs">
						<view class="view1"><label>姓名:&nbsp;{{name}}</label><label
								class="lable1">性别:&nbsp;{{sex}}</label><label class="lable1">年龄:&nbsp;{{age}}</label>
						</view>
						<view class="view1"><label>学号:&nbsp;{{xh}}</label><label
								class="lable2">手机号:&nbsp;{{sjh}}</label></view>
						<view class="view1"><label>QQ号:&nbsp;{{qq}}</label><label
								class="lable3">微信号:&nbsp;{{wx}}</label></view>
						<view class="view1"><label>所属部门:&nbsp;{{ssbm}}</label><label
								class="lable4">所在班级:&nbsp;{{bj}}</label></view>
						<button class="bt" @tap="bt">点击编辑个人信息</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: "甘梁良",
				sex: "男",
				age: "21",
				xh: "225602050258",
				sjh: "13481043564",
				qq: "3224710338",
				wx: "wx13481043564",
				ssbm: "技术部",
				bj: "计应专2105班",
			}
		},
		methods: {
			xxxg2() {
				uni.navigateTo({
					url: "./pc3"
				})
			},
			kq2() {
				uni.navigateTo({
					url: "./pc2"
				})
			},
			hyxx2() {
				uni.navigateTo({
					url: "./pc4"
				})
			},
			bt() {
				uni.navigateTo({
					url: "./pc1"
				})
			},
		}
	}
</script>

<style>
	.view1 {
		margin-top: 20px;
	}

	/* 左边侧边栏 */
	.aside {
		float: left;
		width: 155px;
		height: 752px;
		background: url("../../static/PC/pc.png");
	}

	/* 电脑图标 */
	.modify {
		position: absolute;
		left: 30px;
		top: 90.62px;
		width: 77px;
		height: 77px;
	}

	.js {
		/* CAME计协管理系统 */
		position: absolute;
		left: 25px;
		top: 174px;
		width: 90px;
		height: 34px;
		font-family: YouSheBiaoTiHei;
		font-size: 24px;
		font-weight: normal;
		text-align: center;
		color: #FFFFFF;
	}

	.jss {
		/* 矩形 2 */
		position: absolute;
		left: 0px;
		top: 265.54px;
		width: 154px;
		height: 32px;
		background: #2B54B2;
	}

	.hyxx {
		/* user-2-fill 1 */
		position: absolute;
		left: 28.5px;
		top: 269px;
		width: 26.63px;
		height: 26.63px;
	}

	.hyxx2 {
		/* 会员信息 */
		position: absolute;
		left: 57px;
		top: 270px;
		width: 70px;
		height: 23.63px;
		font-family: SourceHanSansCN-Medium;
		font-size: 17px;
		font-weight: 500;
		color: #FFFFFF;
	}

	.jsss {
		/* 矩形 2 */
		position: absolute;
		left: 0px;
		top: 310.54px;
		width: 154px;
		height: 32px;
		background: #2B54B2;
	}

	.xxxg {
		/* draft-fill 1 */
		position: absolute;
		left: 28.5px;
		top: 313px;
		width: 26.63px;
		height: 26.63px;
	}

	.xxxg2 {
		position: absolute;
		left: 57px;
		top: 315px;
		width: 70px;
		height: 23.63px;
		font-family: SourceHanSansCN-Medium;
		font-size: 17px;
		font-weight: 500;
		color: #FFFFFF;
	}

	.jssss {
		/* 矩形 2 */
		position: absolute;
		left: 0px;
		top: 350.54px;
		width: 154px;
		height: 32px;
		background: #2B54B2;
	}

	.kq1 {
		/* draft-fill 1 */
		position: absolute;
		left: 28.5px;
		top: 353px;
		width: 26.63px;
		height: 26.63px;
	}

	.kq2 {
		position: absolute;
		left: 57px;
		top: 354px;
		width: 70px;
		height: 23.63px;
		font-family: SourceHanSansCN-Medium;
		font-size: 17px;
		font-weight: 500;
		color: #FFFFFF;
	}

	.jsssss {
		/* 矩形 2 */
		position: absolute;
		left: 0px;
		top: 390.54px;
		width: 154px;
		height: 32px;
		background: #2B54B2;
	}

	/* 图标 */
	.name2 {
		width: 30px;
		height: 30px;
		margin-left: 12px;
		margin-top: 7px;
	}

	.xx {
		/* 会员信息 */
		position: absolute;
		left: 197px;
		top: 7px;
		width: 100px;
		height: 50px;
		font-family: SourceHanSansCN-Medium;
		font-size: 24px;
		font-weight: 500;
		color: #000000;
	}

	/* 右边容器 */
	.main {
		height: 647px;
	}

	/* 头部 */
	.head {
		height: 44px;
		width: 1530px;
		background: #EBEBEB;
		/* 下边框阴影 */
		box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
	}

	/* 主内容 */
	.main2 {
		height: 603px;
	}

	/* 矩形 */
	.jx {
		width: 1004px;
		height: 582px;
		position: absolute;
		left: 270px;
		top: 80px;
		width: 1127px;
		/* 圆角矩形 */
		border-radius: 43px;
		background: #F0F0F0;
	}

	.tx {
		/* 头像 */
		position: absolute;
		left: 85px;
		top: 45px;
		width: 120px;
		height: 120px;
		border-radius: 71.5px;
	}

	/* 信息展示 */
	.xxzs {
		margin-left: 250px;
		margin-top: 60px;
		font-family: SourceHanSansCN-Regular;
		font-size: 24px;
		font-weight: normal;
		color: #000000;
	}

	.lable1 {
		margin-left: 180px;
	}

	.lable2 {
		margin-left: 185px;

	}

	.lable3 {
		margin-left: 195px;
	}

	.lable4 {
		margin-left: 230px;
	}

	.xh {
		margin-top: 20px;
	}

	.bt {
		width: 180px;
		height: 46px;
		border-radius: 20px;
		background: #D8D8D8;
		box-sizing: border-box;
		border: 1px solid #000000;
		font-family: SourceHanSansCN-Regular;
		font-weight: normal;
		color: #585858;
		margin-right: 20px;
		margin-top: 40px;

	}
</style>
